/**公共样式*/

[v-cloak] {
    display: none !important;
}
@import "./mixins.less";
@import "./base.less";
html {
 background:#f4f6fa;

}
.fs21{
    font-size: 28/2px/*px*/;
}
.fs24{
    font-size: 26/2px/*px*/;
}
.fs26{
    font-size: 28/2px/*px*/;
    color: #565656;
}
.fs28{
    font-size: 28/2px/*px*/;
}
.fs30{
    font-size: 32/2px/*px*/;
    color: #666666;
}
.fs32{
    font-size: 36/2px/*px*/;
}
.fs34{
    font-size: 34/2px/*px*/;
}
.fs36{
    font-size: 25/2px/*px*/;
}
.bg {
    background: #f4f4f4;
}
.bg-blue{
    background-image: linear-gradient(90deg, 
    #4ca7eb 0%, 
    #4f73e8 100%);
    -webkit-background-image: linear-gradient(90deg, 
    #4ca7eb 0%, 
    #4f73e8 100%);
    -moz-background-image: linear-gradient(90deg, 
    #4ca7eb 0%, 
    #4f73e8 100%);
    -o-background-image: linear-gradient(90deg, 
    #4ca7eb 0%, 
    #4f73e8 100%);
}
a{
    cursor: pointer;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance: textfield;
}
/*--------main---------*/
//蓝色字体
.fontBlue {
    color: #20a0ff;
    margin-right: 5px;
}
//红色字体
.fontRed {
    color: #E95212;
    font-size: 26/2px/*px*/;
}
.shopGray{
    color: #999999;
    font-size: 26/2px/*px*/;
    
}
.defaul-bg{
    border: solid 1px #cacaca;
    background-color: #FFF;
    box-shadow: none;
    color: #000;
}
.shop-bg{
    background-color: #20a0ff;
    color: #ffffff;
}
/*-----common------*/

.clearfix {
    zoom: 1;
    _zoom: 1;
    clear: both;
    &::after {
        clear: both;
        content: ' ';
        display: block;
        width: 0;
        height: 0;
        visibility: hidden;
    }
}

.shop-fl {
    float: left;
}

.shop-fr {
    float: right;
}

.shop-hide {
    display: none;
}

.shop-show {
    display: block;
}

.shop-box {
    .ik-box;
}

.shop-inblock {
    display: inline-block !important;
}

.shop-box-center {
    .ik-box;
    .ik-box-pack(center);
    .ik-box-align(center);
}

.shop-box-justify {
    .ik-box;
    .ik-box-pack(justify);
    .ik-box-align(center);
}

.overflow-x {
    overflow: hidden;
    overflow-x: hidden;
}

//文本对齐
.shop-textl {
    text-align: left;
}

.shop-textr {
    text-align: right;
}

.shop-textc {
    text-align: center;
}

//超出部分隐藏，并显示....
.text-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

//显示两行，超出部分隐藏，并显示....
.text-overflow2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: bold;
    font-size: 28/2px;
}

//显示三行，超出部分隐藏，并显示....
.text-overflow3 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.input-placeholder{
    input::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #cacaca;
    }
    input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #cacaca;
    }
    input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #cacaca;
    }
    input::-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #cacaca;
    }
}

.textarea-placeholder{
    textarea::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #cacaca;
    }
    textarea:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #cacaca;
    }
    textarea::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #cacaca;
    }
    textarea::-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #cacaca;
    }
}
//强制换行
.text-force-wrap {
    word-break: break-all;
    white-space: pre-wrap;
}

//强制不换行
.text-not-wrap {
    white-space: nowrap;
}

//ipadfixed自适应样式 
.ipad-fixed{
    top: 0;
    left: 50%;
    max-width: @width-media;
    transform: translate(-50%,0);
}
.one-border-top{
    position: relative;
  }
  .one-border-top::before{
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    background-color: #e8e8ed;
    transform: scaleY(0.5);
    position: absolute;
    top: 0;
    left: 0;
  }
  .one-border-bottom{
    position: relative;
  }
  .one-border-bottom::after{
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    background-color: #e8e8ed;
    transform: scaleY(0.5);
    position: absolute;
    bottom: 0;
    left: 0;
  }
  /*1px-border-bottom*/

.border,
.border-radius {
    position: relative;
    border-bottom: 1px solid #e0e0e0;
}

@media (-webkit-min-device-pixel-ratio: 2) {
    .border {
        border: none;
        background-image: -webkit-linear-gradient(90deg, #d9d9d9, #fff 50%, transparent 50%);
        background-image: -moz-linear-gradient(90deg, #fff, #d9d9d9 50%, transparent 50%);
        background-image: -o-linear-gradient(90deg, #d9d9d9, #fff 50%, transparent 50%);
        background-image: linear-gradient(0, #fff, #d9d9d9 50%, transparent 50%);
        background-size: 100% 1px;
        background-repeat: no-repeat;
        background-position: bottom
    }
}
.slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .3s ease;
  }
  .slide-fade-enter, .slide-fade-leave-to{
    transform: translateX(100%);
    opacity: 0;
  }